<template>
  <div class="tableHeaderShow">
    <el-popover placement="bottom-end" trigger="click">
      <template>
        <div>
          <el-checkbox v-model="allSelect" @change="selectAll">全选</el-checkbox>
        </div>
        <div v-for=" (item, index) in myHeaderList" :key="index">
          <el-checkbox v-model="item.isSelect" @change="onChange">{{item.label}}</el-checkbox>
        </div>
      </template>
      <el-button class="tag" size="small" slot="reference" >显示字段 <i class="el-icon-arrow-down el-icon--right"></i> </el-button>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myHeaderList: this.headerList,
      allSelect: true,
      count:this.headerList.length
    };
  },
  props: {
    headerList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    
  },
  methods: {
    onChange(flag){
      this.count = flag ?  this.count + 1 : this.count - 1
      if(this.count === this.myHeaderList.length) this.allSelect =  true
      else this.allSelect =  false
      this.$emit('onChange')
    },
    selectAll(val) {
      for (let i = 0; i < this.myHeaderList.length; i++) {
        // this.$set(this.myHeaderList[i], "isSelect", val);
        this.myHeaderList[i].isSelect = val
      }
      if(val) this.count = this.myHeaderList.length
      else this.count = 0
      // this.$emit("update:headerList", this.myHeaderList);
      this.$emit('onChange')
    }
  }
};
</script>

<style scoped lang='less'>

</style>